<template>
	<view class="page-body" :class="[app.setCStyle(from)]">
		<u-form :model="model"  ref="uForm" :errorType="errorType">
			<view class="pbox bg-white">
				
				<u-form-item :label-position="labelPosition" label="安全密码" prop="password" label-width="150">
					<u-input :password-icon="true" :border="border" type="password" v-model="model.password" placeholder="请输入新安全密码"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="确认密码" prop="rePassword" label-width="150">
					<u-input :password-icon="true" :border="border" type="password" v-model="model.rePassword" placeholder="请输入安全密码"></u-input>
				</u-form-item>
				
				<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" right-icon="phone" :label-position="labelPosition" label="手机号码" prop="mobile" label-width="180">
					<u-input :border="border" placeholder="请输入手机号" v-model="model.mobile" type="number"></u-input>
				</u-form-item>
				
				<u-form-item :label-position="labelPosition" label="验证码" prop="code" label-width="180">
					<u-input :border="border" placeholder="请输入验证码" v-model="model.code" type="text"></u-input>
					<button slot="right" type="success" size="mini" class="bg-base color-ff" @click="getCode">获取验证码</button>
				</u-form-item>
			 
			</view>
		 
					
		 
			<view class="pbox mt40">
			<button size="default" shape="circle"  type="warning"  class="fs32 primarybtn" @click="submit">确认修改</button>
			</view>
		</u-form>
	</view>
</template>

<script>
	export default {
		data() {
			let that = this;
			return {
				from: '',
				phoneNumber:'',
				model: {
					old_password: '',
					password: '',
					rePassword: '', 
					mobile:'',
					code: '',
				},
				rulesgetCode:{
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					]
				},
				rules: {
					mobile: [
						{
							required: true,
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change','blur'],
						}
					],
					code: [
						{
							min: 6,
							required: true,
							message: '请输入6位验证码',
							trigger: ['change','blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: ['change','blur'],
						}
					],
					 
				 
				},
				pwrules: {
					/*
					old_password: [{
							required: true,
							message: '请输入旧密码',
							trigger: ['change', 'blur'],
						},
						{
							min: 8,
							message: '旧密码不能少于8个字符',
							trigger: 'change',
						}
					],
					*/
					password: [{
							required: true,
							message: '请输入新密码',
							trigger: ['change', 'blur'],
						},
						{
							min: 8,
							message: '新密码不能少于8个字符',
							trigger: 'change',
						}
					],
					rePassword: [{
							required: true,
							message: '请重新输入新密码',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value === this.model.password;
							},
							message: '两次输入的密码不相等',
							trigger: ['change', 'blur'],
						}
					],
				},
				border: false,
				labelPosition: 'left',
				errorType: ['toast']
			};
		},
		onLoad(options) {
			this.from = options.from;
			setTimeout(() => {
				this.$u.get('member/api.passport/getUserid',{share_token:uni.getStorageSync("share_token")}).then(res => {
					that.model.invite_code = res.data.user_id;
				})
				// that.model.invite_code = uni.getStorageSync("share_token");
			},1500);
		},
		computed: {
			borderCurrent() {
				return this.border ? 0 : 1;
			},

		},
		onReady() {
			this.$refs.uForm.setRules(this.pwrules);
		},
		methods: {
			
			// 获取验证码
			getCode() {
				let _this = this;
				if(_this.$refs.uCode.canGetCode) {
					_this.$refs.uForm.setRules(_this.rulesgetCode);
					_this.$refs.uForm.validate(valid => {
						if (valid) {
							// 向后端请求验证码
							uni.showLoading({
								title: '正在获取验证码',
								mask: true
							})
							_this.$u.get('publics/api.sms/sendCode', {
								'type': 'shtanquan_password',
								'mobile': _this.model.mobile
							}).then(res => {
								uni.hideLoading();
								// 这里此提示会被_this.start()方法中的提示覆盖
								if (res.data.code){
									let that = this;
									let contentText = '测试状态，验证码为'+res.data.code;
									let code = res.data.code;
									uni.showModal({
										title: '提示',
										content: contentText,
										showCancel: false,
										confirmText:'复制',
										success: function(res) {
											that.app.copy(code);
										}
									});
									// this.$u.toast('测试状态，验证码自动填充');
									// this.model.code = res.data.code;
								}else{
									_this.$u.toast('验证码已发送');
								}
								_this.user_exist = res.data.user_exist;
								// 通知验证码组件内部开始倒计时
								_this.$refs.uCode.start();
							})
						}
					});
				} else {
					_this.$u.toast('倒计时结束后再发送');
				}
			},
			submit() {
				this.model.openid = this.app.getWxOpenId();
				this.$refs.uForm.validate(valid => {
					if (!valid) {
						return false;
					} 
					this.$u.get('member/api.users/editanquanPwd', this.model).then(res => {
						uni.showModal({
						    title: '提示',
						    content: '安全密码修改成功.',
							showCancel:false,
						    success: function (res) {
						        if (res.confirm) {
						           uni.redirectTo({
						           	url: '/pages/channel/passport/login'
						           });
						        } 
						    }
						});
					})
				});
			},
			
		}
	}
</script>

<style lang='scss'>

</style>
